<template>
    <div>
        {{counter}} <br/>
       <button @click="counter++">加1</button>
        <button v-on:click="counter++">加1</button>
        <button @click="geet">加1</button>
        <button @click="say('zhangsan', $event)">传参数</button>
    </div>
</template>

<script>
export default{
  name:"EventDemo",
  data(){
    return {
      msg:"EventDemo",
       counter: 0
    }
  },
  methods:{
    say(name,e){
      console.log(name+'你好');
       console.log(e.target.tagName);
    },
     geet(e){
         console.log("geet");
         this.counter++;
         alert(e.target.tagName);
         /****
         e: 这是一个事件对象 (Event Object)。
         当你为一个元素（如 button, div）添加事件监听器（如 click, keydown）时，
         浏览器在触发该事件时，会自动创建一个事件对象，并将其作为第一个参数传递给你的事件处理函数。
         e.target: 这是事件对象的一个属性，它指向最开始触发事件的那个元素。
         在事件冒泡（Event Bubbling）的场景中，这一点至关重要。
         e.target.tagName: 这是 e.target 元素的一个属性，
         它返回该元素的大写字母形式的 HTML 标签名（如 "DIV", "P", "BUTTON", "A"）。
         2. 为什么需要它？（主要用途）
         最主要的用途是事件委托 (Event Delegation)。
         事件委托是一种高效的事件处理模式，它利用了事件冒泡机制。你不再为每个子元素单独添加事件监听器，
         而是只为它们的一个共同的父元素添加一个监听器。
         然后，在这个父监听器里，通过 e.target.tagName 来判断到底是哪个子元素触发了事件。
         好处：
         性能更高：减少了内存中的事件监听器数量。
         代码更简洁：无需在动态添加或删除子元素时，手动绑定或解绑事件。
         对动态元素友好：即使子元素是后来通过 JavaScript 动态添加的，事件依然有效。
         ****/
     },
  }
}
</script>

<style>
</style>
